
<template>
  <div class="app-container">

    <div style="color:red; font-weight: 700;">调查报告书</div>

    <div style="color:red; font-weight: 700;">未遂事故报告</div>

    <el-table ref="dragTable" v-loading="listLoading" :data="faultList" row-key="id" border fit highlight-current-row style="width: 100%">

      <el-table-column min-width="100px" label="未遂事故单号">
        <template slot-scope="scope">
          <span>{{ scope.row.faultId }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.faultWriteTime|parseTime('{yy}-{mm}-{dd}') }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="发生时间">
        <template slot-scope="scope">
          <span>{{ scope.row.faultTime|parseTime('{yy}-{mm}-{dd}') }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="发生位置">
        <template slot-scope="scope">
          <span>{{ scope.row.faultLocation }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="所属Team">
        <template slot-scope="scope">
          <span>{{ scope.row.faultTeam.deptName }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="题目">
        <template slot-scope="scope">
          <span>{{ scope.row.faultTitle }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="内容">
        <template slot-scope="scope">
          <span>{{ scope.row.faultContent }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="发生原因">
        <template slot-scope="scope">
          <span>{{ scope.row.faultReason }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="未遂事故的对策">
        <template slot-scope="scope">
          <span>{{ scope.row.faultFun }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="原因类型">
        <template slot-scope="scope">
          <span>{{ scope.row.fault_TypeId }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="未遂事故说明">
        <template slot-scope="scope">
          <span>{{ scope.row.faultRemark }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="未遂事故单建议">
        <template slot-scope="scope">
          <span>{{ scope.row.faultadvice }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="创建人部门">
        <template slot-scope="scope">
          <span>{{ scope.row.faultUserDep.deptName }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="创建人">
        <template slot-scope="scope">
          <span>{{ scope.row.faultUserCode.userName }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="未遂事故单号">
        <template slot-scope="scope">
          <span>{{ scope.row.faultId }}</span></template>
      </el-table-column>
    </el-table>

    <div style="color:red; font-weight: 700;">调查报告</div>

    <el-table ref="dragTable" v-loading="listLoading1" :data="inquiryList" row-key="id" border fit highlight-current-row style="width: 100%">

      <el-table-column min-width="100px" label="调查单号">
        <template slot-scope="scope">
          <span>{{ scope.row.inquiryId }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="登陆时间">
        <template slot-scope="scope">
          <span>{{ scope.row.loginTime==null? ' ':scope.row.loginTime|parseTime('{yy}-{mm}-{dd}') }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="调查开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.inquiryStartDate|parseTime('{yy}-{mm}-{dd}') }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="调查结束时间">
        <template slot-scope="scope">
          <span>{{ scope.row.inquiryEndDate|parseTime('{yy}-{mm}-{dd}') }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="调查Team长">
        <template slot-scope="scope">
          <span>{{ scope.row.inquiryTeamerCode.userName }}</span></template>
      </el-table-column>

    </el-table>

    <div style="color:red; font-weight: 700;">改善计划</div>

    <el-table ref="dragTable" v-loading="listLoading1" :data="improveList" row-key="id" border fit highlight-current-row style="width: 100%">

      <el-table-column min-width="100px" label="改善计划编号">
        <template slot-scope="scope">
          <span>{{ scope.row.inquiryId }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="登陆时间">
        <template slot-scope="scope">
          <span>{{ scope.row.loginDate==null? ' ':scope.row.loginDate|parseTime('{yy}-{mm}-{dd}') }}</span></template>
      </el-table-column>

      <el-table-column min-width="100px" label="改善Team长">
        <template slot-scope="scope">
          <span>{{ scope.row.loginUser.userName }}</span></template>
      </el-table-column>

      <el-table-column min-width="100px" label="改善题目">
        <template slot-scope="scope">
          <span>{{ scope.row.improveTitle }}</span></template>
      </el-table-column>

      <el-table-column min-width="100px" label="事故概要和调查结果">
        <template slot-scope="scope">
          <span>{{ scope.row.faultConAndConsle }}</span></template>
      </el-table-column>

      <el-table-column min-width="100px" label="根本原因">
        <template slot-scope="scope">
          <span>{{ scope.row.faultReason }}</span></template>
      </el-table-column>

      <el-table-column min-width="100px" label="改善计划内容">
        <template slot-scope="scope">
          <span>{{ scope.row.improveContent }}</span></template>
      </el-table-column>

      <el-table-column min-width="100px" label="改善计划部门">
        <template slot-scope="scope">
          <span>{{ scope.row.planTeam==null?'':scope.row.planTeam.deptName }}</span></template>
      </el-table-column>

      <el-table-column min-width="100px" label="改善计划人员">
        <template slot-scope="scope">
          <span>{{ scope.row.planUser==null?'':scope.row.planUser.userName }}</span></template>
      </el-table-column>
    </el-table>

    <div style="color:red; font-weight: 700;">实施计划</div>
    <el-table ref="dragTable" v-loading="listLoading" :data="workoutList" row-key="id" border fit highlight-current-row style="width: 100%">

      <el-table-column width="180px" align="center" label="实施工单编号" prop="workOderId">
        <template slot-scope="scope">
          <span>{{ scope.row.workOderId }}</span></template>
      </el-table-column>
      <el-table-column min-width="300px" label="实施单题目">
        <template slot-scope="scope">
          <span @click="handleDetail(scope.row)">{{ scope.row.workOrderTitle }}</span></template>
      </el-table-column>
      <el-table-column min-width="300px" label="未遂事故题目">
        <template slot-scope="scope">
          <span>{{ scope.row.faultId.faultTitle }}</span></template>
      </el-table-column>
      <el-table-column width="100px" label="登录时间" prop="loginTime">

        <template slot-scope="scope">
          <span>{{ scope.row.loginTime }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="实施单填写人" width="95">
        <template slot-scope="scope">
          <span @click="handleDetail(scope.row)">{{ scope.row.workOrderUserCode.userName }}</span></template>
      </el-table-column>
      <el-table-column class-name="status-col" label="实施单填写人部门" width="110">
        <template slot-scope="scope">
          <span @click="handleDetail(scope.row)">{{ scope.row.workOrderUserDep.deptName }}</span></template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

import { parseTime } from '@/utils'
import waves from '@/directive/waves'
import { getReport } from '@/api/workout'
export default {
  name: 'FaultReport',
  components: { },
  directives: { waves },
  data() {
    return {

      faultList: '',
      inquiryList: '',
      improveList: '',
      workoutList: '',
      listLoading: '',
      listLoading1: '',
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'sdate', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  created() {
    const workOderId = this.$route.query.workOderId

    this.fechData(workOderId)
  },
  methods: {
    fechData(workOderId) {
      // 通过实施单的主键，查询未遂事故单，调查计划单，改善计划单
      const query = { workOderId: workOderId }
      getReport(query).then((response) => {
        this.faultList = response.faultList
        this.inquiryList = response.inquiryList
        this.improveList = response.improveList
        this.workoutList = response.workoutList
        this.dialogFormVisible = false
      })
    },
    handleDownload() {
    },
    handleReset() {
      this.temp = {
        lsdate: null
      }
    },
    handleFilter() {
      this.fechData()
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>

